<template>
  <div class="login">
    <form
      class="login-form"
      ref="loginForm"
      :model="loginForm"
      auto-complete="on"
      label-position="left"
    >
      <div class="title">天府新区数字城市智慧生态</div>
      <div class="inp">
        <input
          type="text"
          prop="LoginName"
          ref="username"
          v-model="loginForm.LoginName"
          name="username"
          id="username"
          class="inpa"
          placeholder="请输入账号"
        />
        <input
          type="password"
          prop="password"
          ref="password"
          v-model="loginForm.password"
          id="password"
          class="inpb"
          placeholder="请输入密码"
        />
        <div class="flex-box">
          <!-- <input type="text" name="" id="" ref="code" class="inpc" placeholder="请输入验证码" v-model="loginForm.code"
            @keydown.enter="handleLogin" maxlength="4" />
          <img class="code" :src="`${'data:image/png;base64,'}` + loginForm.imgByteArray" @click="sendCode"   /> -->
          <input
            type="text"
            name=""
            id=""
            ref="code"
            class="inpc"
            placeholder="请输入验证码"
            v-model="loginForm.code"
            @keydown.enter="handleLogin"
            maxlength="4"
          />
          <img
            class="code"
            :src="`${'data:image/png;base64,'}` + loginForm.imgByteArray"
            @click="sendCode"
          />
        </div>

        <div class="tips">不区分大小写</div>
        <div class="clear"></div>
        <div class="btn" @click="handleLogin">登录</div>
        <!-- <div class="telLogin" @click="telLogin">短信验证码登录</div> -->
      </div>
    </form>
  </div>
</template>

<script>
import local from "@/utils/local";
import { checkPhone, checkPwd } from "@/common/common.js";
import {
  GenerateCaptcha,
  VerifyCaptcha,
  Login,
  ciphertext,
  ssokey,
} from "@/api/api";
import { getPermission } from "@/api/userControl";
// import { number } from "echarts/lib/export";
export default {
  name: "Login",
  data() {
    return {
      sj: sessionStorage.setItem("timestamp", new Date().getTime()),
      mw: "",
      loginForm: {
        LoginName: "", //登录名（通常是英文）
        phone: "", // 电话
        password: "", //密码
        type: "1", // 登录类型，1 登录名+密码+图形验证码、2 手机号+短验码
        getDishType: "",
        imgByteArray: "", // 验证码图片
        captchaKey: "", // 图形验证码的key
        captcha: "", //图形验证码
        verifyCode: "", // 手机短信验证码
        getMenulist: "", // 企业编码 - 仅在多租户部署下需要提供
        code: "",
        codeNum: "",
      },
      ssokey: "",
    };
  },
  mounted() {
    sessionStorage.getItem("functionality", "");
  },
  async created() {
    await this.Getciphertext();
    //  this.GetSsoKey();
    setTimeout(() => {
      this.sendCode();
    }, 1000);
  },
  methods: {
    //  获取密文
    async Getciphertext() {
      try {
        let res = await ciphertext({
          timestamp: sessionStorage.getItem("timestamp"),
        });
        this.mw = res.data;
        let res2 = await ssokey({
          sys: "SSO",
          OriginalData: sessionStorage.getItem("timestamp"),
          Encrypteddata: res.data,
        }); // 取出结果
        if (res2.status === 200) {
          this.ssokey = res.data;
          sessionStorage.removeItem("ssokey");
        }
      } catch (err) {
        console.log(err);
      }
    }, // 获取服务器ssokey
    // async GetSsoKey() {
    //   try {
    //     let res = await ssokey({
    //       sys: "SSO",
    //       OriginalData: sessionStorage.getItem("timestamp"),
    //       Encrypteddata: sessionStorage.getItem("privateKey"),
    //     }); // 取出结果
    //     if (res.status === 200) {
    //       this.ssokey = res.data;
    //       sessionStorage.setItem("ssokey", res.data);
    //     }
    //   } catch (err) {
    //     console.log(err);
    //   }
    // },
    // 登录
    async handleLogin() {
      if (this.loginForm.LoginName == "") {
        this.$message({
          showClose: true,
          message: "请输入账号！",
          type: "error",
        });
        return;
      }
      if (this.loginForm.password == "") {
        this.$message({
          showClose: true,
          message: "请输入密码！",
          type: "error",
        });
        return;
      }
      if (this.loginForm.code == "") {
        this.$message({
          showClose: true,
          message: "请输入验证码！",
          type: "error",
        });
        return;
      } else {
        await this.Getciphertext();
        // this.$refs.code.value = "";
        // 先判断图形验证码
        let res2 = await VerifyCaptcha({
          code: this.loginForm.code,
          captchaKey: this.loginForm.captchaKey,
        });
        if (res2.data == 0) {
          let Base64 = require("js-base64").Base64;
          await this.Getciphertext();
        
          // 登录用户信息
          let res = await Login({
            LoginName: this.loginForm.LoginName,
            password: Base64.encode(this.loginForm.password),
          });
          if (res.data.data != "") {
            sessionStorage.setItem("LoginUserInif", JSON.stringify(res.data)); //存储登录用户的信息
            sessionStorage.setItem("pwd", this.loginForm.password);
            sessionStorage.setItem("LoginName", this.loginForm.LoginName);
            sessionStorage.setItem("ssokey", this.ssokey);
            await this.Getciphertext();
           
            let arr = await getPermission({
              loginName: this.loginForm.LoginName,
            });
            console.log("arr", arr);
            let aaa = arr.data.sort(function (a, b) {
              return a.permissionid - b.permissionid;
            });
            sessionStorage.setItem("data", JSON.stringify(aaa));
            if (aaa[0].permissionid == 1) {
              this.$router.push("/water");
              location.reload();
            } else if (aaa[0].permissionid == 2) {
              this.$router.push({ path: "/gas" });
              location.reload();
            } else if (aaa[0].permissionid == 3) {
              this.$router.push({ path: "/forest" });
              location.reload();
            } else if (aaa[0].permissionid == 4) {
              this.$router.push({ path: "/wellLid" });
              location.reload();
            }
            location.reload();
            this.$message({
              showClose: true,
              message: "欢迎登录！",
              type: "success",
            });
          } else {
            this.$message.error(res.data.message);
            await this.Getciphertext();
            await this.sendCode();
          }
        } else {
          this.$message.error("验证码错误!");
          await this.Getciphertext();
          await this.sendCode();
          this.loginForm.code = "";
          this.$refs.code.focus();
          return;
        }
      }
    },
    // 获取验证码
    async sendCode() {
      this.sj = sessionStorage.setItem("timestamp", new Date().getTime());

      let Base64 = require("js-base64").Base64;
      let res = await GenerateCaptcha();
      this.loginForm.captchaKey = res.data.captchaKey;
      this.loginForm.imgByteArray = res.data.imgByteArray;
    },
    // 短信登录
    telLogin() {
      this.$router.push("/codelogin");
    },
  },
};
</script>

<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}

.login {
  width: 100%;
  height: 100%;
  background: url("../../static/天府新区/切图/登录-bg.png") no-repeat;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100;
  zoom: 1;
}

.login-form {
  width: 25%;
  height: 62%;
  background: rgba(37, 51, 86, 0.4);
  position: absolute;
  left: 50%;
  top: 50%;
  /* 设置元素的相对于自身的偏移度为负50%(也就是元素自身尺寸的一半)*/
  transform: translate(-50%, -50%);
}

.title {
  text-align: center;
  margin-top: 40px;
  color: rgb(117, 197, 253);
  font-size: 24px;
  overflow: hidden;
}

.inp {
  width: 80%;
  height: 70%;
  margin-top: 0.125rem;
  margin: 50px auto;
  overflow: hidden;
}

.inpa {
  height: 40px;
  width: 100%;
  display: inline-block;
  border: none;
  background: url("../../static/天府新区/切图/登录-账号.png") no-repeat;
  background-position: 3px;
  padding-left: 0.375rem;
  background-color: rgb(50, 68, 106);
  color: #fff;
  outline: none;
}

.inpb {
  height: 40px;
  width: 100%;
  display: inline-block;
  border: none;
  margin-top: 0.375rem;
  color: #fff;
  background: url("../../static/天府新区/切图/登录-密码.png") no-repeat;
  background-position: 3px;
  padding-left: 30px;
  background-color: rgb(50, 68, 106);
  outline: none;
}

.inpc {
  height: 40px;
  width: 60%;
  display: inline-block;
  border: none;
  margin-top: 0.375rem;
  background: url("../../static/天府新区/切图/登录-验证码.png") no-repeat;
  background-position: 3px;
  padding-left: 0.375rem;
  background-color: rgb(50, 68, 106);
  color: #fff;
  outline: none;
}

.btn {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin: auto;
  color: #fff;
  background: royalblue;
  cursor: pointer;
}

.flex-box {
  display: flex;
  justify-content: space-between;
}

.code {
  height: 40px;
  width: 30%;
  margin-top: 0.375rem;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  background-color: rgb(50, 68, 106);
}

img {
  width: 100%;
  height: 100%;
}

.tips {
  color: #ccc;
  width: 48%;
  height: 30px;
  font-size: 14px;
  text-align: right;
  float: right;
  margin: 0.2rem 0 0.2rem /* 20/75 */ 0 /* 20/75 */;
  line-height: 30px;
}

.reg {
  color: #ccc;
  width: 48%;
  height: 30px;
  font-size: 14px;
  text-align: left;
  line-height: 30px;
  cursor: pointer;
}

.telLogin {
  margin-top: 10px;
  float: right;
  color: #ccc;
  font-size: 14px;
  cursor: pointer;
}

.clear {
  clear: both;
}
.find {
  margin-top: 10px;
  float: left;
  color: #ccc;
  font-size: 14px;
  cursor: pointer;
}
.find::after {
  content: "";
  display: block;
  clear: both;
}
</style>